<template>
  <div>
    <div style="width:100%">
      <img src="../assets/tu1.png" width="100%" />
    </div>
    <van-tabs v-model="sel">
      <!-- 头部导航 -->
      <van-tab title="菜单">
        <div class="box">
          <!-- 侧边栏 -->
          <div class="left">
            <div
              style="width:100%;height:50px;text-align:center;line-height:50px"
              v-for="(item,index) in $store.state.list"
              :key="index"
              :class="{active:rel==index}"
              @click="add(item,index)"
            >
              <!-- 渲染侧边栏内容 -->
              {{item.anchor_point}}
            </div>
          </div>
          <!-- 右边内容 -->
          <div class="right">
            <van-card
              v-for="(item,index) in $store.state.lists"
              :key="index"
              :price="item.comm_price"
              :title="item.comm_message"
              :thumb="item.comm_image"
            >
              <template #num>
                <div @click="adds($event,item)">
                  <van-stepper v-model="item.num" min="0" @change="cart(item)" />
                </div>
              </template>
            </van-card>
          </div>
        </div>
      </van-tab>
      <van-tab title="评价">内容 2</van-tab>
      <van-tab title="商家">内容 3</van-tab>
    </van-tabs>

    <van-submit-bar :price="$store.getters.zj" button-text="去结算" style="z-index:9999">
      <van-icon name="send-gift" size="40" @click="tan"/>
      <template #tip>
        
      </template>
    </van-submit-bar>
<!-- 底部弹窗 -->
<van-popup v-model="$store.state.show" position="bottom" :style="{ height: '30%' }">
          <van-cell-group>
            <van-cell>
              <template #default>
                <div @click="del">
                  <van-icon name="delete" />
                </div>
              </template>
            </van-cell>
            <van-cell v-for="(item,index) in $store.state.cart" :key="index" :title="item.title">
              <template #default>
                <div style="display:flex;justify-content:space-between">
                  <span style="color:red">￥{{item.comm_price * item.num}}</span>
                  <span></span>
                  <van-stepper v-model="item.num" />
                </div>
              </template>
            </van-cell>
            <van-cell title="包装费">
              <template #default>
                <div style="display:flex;justify-content:space-between">
                  <span>￥{{$store.getters.num}}</span>
                  <span></span>
                  <span></span>
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </van-popup>
    <transition @before-enter="before" @enter="ing" @after-enter="after">
      <div class="ball" v-if="shows"></div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      lists: [],
      sel: 0,
      rel: 0,
      cx: 0,
      cy: 0,
      shows: false,
    };
  },
  created() {
    this.$axios.get("http://localhost:8080/data.json").then((res) => {
      console.log(res.data);
      let list = res.data;
      // this.lsit = list;
      this.$store.commit("addList", list);
      let lists = list[0].commodity_list;
      // this.lists = lists;
      // console.log(lists)
      this.$store.commit("addLists", lists);
    });
  },
  methods: {
    add(item, i) {
      console.log(item.commodity_list);
      this.rel = i;
      this.$store.commit("addLists", item.commodity_list);
    },
    adds(e, item) {
      if (item.num <= 0) {
        return;
      } else {
        this.cx = e.clientX;
        this.cy = e.clientY;
        this.shows = true;
        this.$store.commit("addCart", item);
      }
    },
    tan() {
      this.$store.commit("addShow", true);
    },

    cart(item) {
      this.$store.commit("change", item);
    },
    del() {
      this.$dialog
        .confirm({
          title: "清空",
          message: "你确定要全部清空吗?",
        })
        .then(() => {
          this.$store.commit("adddel");
        })
        .catch(() => {
          // on cancel
        });
    },
    before(el) {
      el.style.left = this.cx + "px";
      el.style.top = this.cy + "px";
    },
    ing(el, done) {
      el.offsetWidth;
      el.style.left = "30px";
      el.style.top = "700px";
      el.style.transition = "all 1s linear";
      done();
    },
    after() {
      this.shows = false;
    },
  },
};
</script>

<style scoped>
.left {
  width: 30%;
  background: #eee;
}

.right {
  width: 70%;
}

.ball {
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  position: fixed;
}

.my-enter,
.my-leave-to {
  opacity: 0;
  transform: translateX(148px);
}

.my-enter-active,
.my-leave-active {
  transition: all 1s;
}

.box {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.active {
  background-color: #fff;
}
.van-popup {
  bottom: 50px;
}
</style>